feat: Complete Deep URL Navigation with Cross-Platform Copy Functionality#569
Closed
stevepresley wants to merge 145 commits intocoleam00:mainfrom
Closed
feat: Complete Deep URL Navigation with Cross-Platform Copy Functionality#569stevepresley wants to merge 145 commits intocoleam00:mainfrom
stevepresley wants to merge 145 commits intocoleam00:mainfrom
Conversation
Implement comprehensive deep URL linking that allows direct navigation to:
- Specific projects: /projects/{projectId}
- Project tabs: /projects/{projectId}/docs or /projects/{projectId}/tasks
- Specific documents: /projects/{projectId}/docs/{documentId}
- Specific tasks: /projects/{projectId}/tasks/{taskId}
Key features:
- Full React Router v6 integration with URL parameters
- Automatic project/document/task selection from URLs
- Browser forward/back button support
- Bookmarkable and shareable URLs
- State preservation across page refreshes
- Graceful fallback for invalid IDs
Enhanced components:
- App.tsx: Added comprehensive route definitions
- ProjectPage.tsx: URL parameter handling and navigation logic
- DocsTab.tsx: Document selection from URL parameters
- TasksTab.tsx: Task selection support (interface prepared)
Documentation:
- Added comprehensive deep-url-linking.mdx guide
- Updated docs sidebar navigation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Tasks from URLs now open in edit modal when accessed via /projects/{id}/tasks/{taskId}
- Modal closing clears task ID from URL
- URL updates when tasks are selected for editing
Ready for incremental testing in Docker.
This reverts commit 6a6b661.
Major performance improvements:
- Reduced API calls from 60+ to 3 for project/task navigation (96% reduction)
- Eliminated 31 individual archon_project_sources database calls
- Added lightweight background project loading with loading indicator
- Created optimized /projects/{id}/stats endpoint for task counts only
- Fixed Socket.IO broadcasts to use include_content=false
- Removed auto-reload behavior from health checks
- Added on-demand task count loading when switching projects
Technical changes:
- Backend: Updated Socket.IO handlers to skip expensive source linking
- Frontend: Implemented progressive loading (target project first, others lazily)
- Added loading card UI with skeleton placeholders for better UX
- Enhanced projectService.listProjects() to accept include_content parameter
- Fixed health check intervals to prevent overlapping timers
Performance impact:
- Page load time: ~3-5s → ~500ms for deep URLs
- Data transfer: ~400KB → ~15KB per navigation
- Backend load: Massive reduction in concurrent DB queries
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. WalkthroughImplements deep URL linking for projects, documents, and tasks across the UI and docs; adds copy-to-clipboard and platform-aware link utilities; adjusts routing and selection synchronization; introduces lightweight project/doc listing and project stats APIs; updates health and Socket.IO connection handling; adds scrollbar CSS utilities; and provides dev scripts. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Router as React Router
participant ProjectPage
participant DocsTab
participant TasksTab
participant ProjectSvc as projectService
participant CopyUtils as copyHelpers
User->>Router: Navigate /projects/:projectId/(docs|tasks)/:itemId?
Router->>ProjectPage: Render with params
ProjectPage->>ProjectSvc: getProject(projectId) + getProjectStats(projectId)
ProjectPage->>DocsTab: selectedDocumentId (if docs route)
ProjectPage->>TasksTab: selectedTaskId,currentView (if tasks route)
DocsTab->>ProjectSvc: listDocuments(projectId, includeContent=false)
DocsTab-->>DocsTab: loadFullDocument(docId) on selection/deep-link
TasksTab-->>TasksTab: sync view mode with URL (?view=table|board)
User->>ProjectPage: Click copy (ID/URL)
ProjectPage->>CopyUtils: handleCopyClick(event, 'project', projectId)
CopyUtils-->>User: Clipboard result (toast)
opt Select doc/task
User->>DocsTab: Select document
DocsTab->>ProjectPage: onDocumentSelect(docId)
ProjectPage->>Router: Navigate /projects/:projectId/docs/:docId
end
sequenceDiagram
autonumber
participant Health as serverHealthService
participant TaskSock as taskSocketService (dynamic)
participant App as App.tsx
loop interval
Health->>Health: checkHealth()
alt healthy
Health-->>Health: reset missedChecks
Health->>Health: handleConnectionRestored()
opt reconnect flow
Health->>TaskSock: import + reconnect()
end
Health->>App: onReconnected()
else unhealthy
Health-->>Health: missedChecks++
alt threshold reached
Health->>App: onDisconnected()
end
end
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (30)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
Author
|
Closing this PR temporarily - was created to upstream repo prematurely. I wanted to clean up the PR before I submitted but gh pr create defaulted to upstream. Will clean up branch and reopen it shortly. |
Author
|
Ended up adding additional commits, so please see new PR here: #573 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implementation of deep URL navigation for projects, tasks, and documents with comprehensive cross-platform copy functionality, mobile support, performance optimizations, and scrollbar fixes for all three areas. Also allows direct navigation to Table or Board views in the Tasks area of a project.
✅ Deep URL Navigation Features
/projects/{projectId}- Auto-loads and highlights specific projects/projects/{projectId}/tasks?view=table/board- Navigate directly to Board or Table view for a Project's Task list/projects/{projectId}/tasks/{taskId}?view=table/board- Task highlighting with view persistence/projects/{projectId}/docs/{docId}- Document loading and display?view=table/boardfor shareable, bookmarkable URLs✅ Cross-Platform Copy Functionality
✅ Task Highlighting & Navigation
✅ Performance Optimizations
✅ Cross-Platform Scrollbar Fixes
force-scrollbarCSS class with-webkit-appearance: noneProjectPage.tsx)DocsTab.tsx)src/index.css,ProjectPage.tsx,DocsTab.tsx, Task table components✅ Mobile UX Fixes
projectId is not definederror in TaskBoardView✅ Additional Bug Fixes
✅ Cross-Platform Testing
📋 Technical Implementation
platformDetection.ts,copyHelpers.tsfor cross-platform support🔗 Example URLs
http://localhost:3737/projects/452536cf-1fd2-45dc-82cb-064c79f487f8http://localhost:3737/projects/452536cf-1fd2-45dc-82cb-064c79f487f8/tasks?view=tablehttp://localhost:3737/projects/452536cf-1fd2-45dc-82cb-064c79f487f8/tasks?view=boardhttp://localhost:3737/projects/452536cf-1fd2-45dc-82cb-064c79f487f8/tasks/8a93d601-ec86-486a-9fef-b487a1b375fe?view=tablehttp://localhost:3737/projects/452536cf-1fd2-45dc-82cb-064c79f487f8/tasks/8a93d601-ec86-486a-9fef-b487a1b375fe?view=boardhttp://localhost:3737/projects/452536cf-1fd2-45dc-82cb-064c79f487f8/docs/bc6df4e7-5fe5-480c-8769-5717c8f4960bTest Plan
Implementation Details
Frontend Routing
Uses React Router v6 with enhanced route definitions:
Route path="/projects/:projectId/tasks/:taskId"for task deep linkingRoute path="/projects/:projectId/docs/:documentId"for document deep linkinguseParams()and navigation withuseNavigate()URL State Management
/docsand/tasksdetermine active tabreplace: truefor clean browser historyError Handling